@import "../../assets/scss/core/base";

$upload-prefix-cls: #{$jigsaw-prefix}-upload;

.#{$upload-prefix-cls} {
    display: inline-block;
    width: 400px;
    height: 400px;
    &.#{$upload-prefix-cls}-drag-over {
        .#{$upload-prefix-cls}-select-box {
            border: 1px solid $primary-color;
        }
    }
    &-file-input {
        display: none !important;
    }
    &-icon {
        display: inline-block;
        font-size: 60px;
        margin-bottom: 18px;
        color: $text-color-secondary;
    }
    &-prompt {
        font-size: 14px;
        color: $text-color-secondary;
        margin-bottom: 12px;
    }
    &-file-list {
        width: 100%;
        height: 100%;
        background: $component-background;
    }
    &-file {
        position: relative;
        height: 40px;
        padding: 0 20px;
        z-index: $zindex-level-1;
        &:last-child {
            .#{$upload-prefix-cls}-file-left {
                border-bottom: none;
            }
        }
        &:hover {
            .#{$upload-prefix-cls}-file-remove {
                display: inline;
            }
        }
    }
    &-file-left {
        width: 100%;
        height: 100%;
        border-bottom: 1px solid $border-color-base;
        &:before {
            display: inline-block;
            height: 100%;
            content: '';
            vertical-align: middle;
        }
        .#{$upload-prefix-cls}-file-icon {
            font-size: 20px;
            margin-right: 6px;
            vertical-align: middle;
        }
        .#{$upload-prefix-cls}-file-name {
            font-size: 12px;
            color: $text-color-secondary;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 120px);
            vertical-align: middle;
        }
    }
    &-file-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-20px,-50%);
        font-size: 12px;
        .#{$upload-prefix-cls}-pause, .#{$upload-prefix-cls}-loading, .#{$upload-prefix-cls}-success, .#{$upload-prefix-cls}-error {
            margin-left: 6px;
        }
    }
    &-file-remove {
        display: none;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        margin-left: 4px;
        cursor: pointer;
        color: $text-color-secondary;
        z-index: $zindex-level-1;
        &:hover {
            color: $text-color;
        }
    }
    &-loading, &-success, &-error {
        font-size: 16px;
        display: inline-block;
    }
    &-loading {
        color: $primary-color;
    }
    &-success {
        color: $success-color;
    }
    &-error {
        color: $error-color;
    }

    &-file-list-container {
        height: 70%;
        border: 1px solid $border-color-base;
        border-top: none;
        border-radius: 0 0 4px 4px;
    }

    &-select-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        border: 1px dashed $border-color-base;
        border-radius: 4px;
        &.#{$upload-prefix-cls}-select-box-small {
            border: 1px solid $border-color-base;
            border-bottom: 1px dashed $border-color-base;
            border-radius: 4px 4px 0 0;
            .#{$upload-prefix-cls}-icon {
                margin-bottom: 0;
            }
            .#{$upload-prefix-cls}-select-right {
                text-align: left;
                margin-left: 12px;
                .#{$upload-prefix-cls}-prompt {
                    margin-bottom: 6px;
                }
            }
        }
        .#{$upload-prefix-cls}-select-right {
            text-align: center;
        }
    }
}
